<template>
  <div class="forget-main">
    <input type="text" placeholder="账号" v-model="username" />
    <input type="password" placeholder="旧密码" v-model="oldpassWord" />
    <input type="password" placeholder="请输入新密码" v-model="newpassword" />
    <input type="password" placeholder="请确认密码" v-model="confirmpassword" />
    <verification-code
      :captcha-address="captchaAddress"
      @handleVerificationCode="handleVerificationCode"
    />
    <div class="edit" @click="handleEditPassword">确认修改</div>
  </div>
</template>

<script>
import VerificationCode from "components/content/verificationCode/VerificationCode";

export default {
  data() {
    return {
      username: "",
      oldpassWord: "",
      newpassword: "",
      confirmpassword: "",
      verificationCode: "",
    };
  },
  props: {
    captchaAddress: {
      type: String,
      default() {
        return "";
      },
    },
  },
  methods: {
    handleVerificationCode(verificationCode) {
      this.verificationCode = verificationCode;
      console.log(verificationCode);
    },
    handleEditPassword() {
      let tips = "";
      if (!this.username) {
        tips = "请输入账号";
      } else if (!this.oldpassWord) {
        tips = "请输入旧密码";
      } else if (!this.newpassword) {
        tips = "请输入新密码";
      } else if (!this.confirmpassword) {
        tips = "请确认密码";
      } else if (!this.verificationCode) {
        tips = "请输入验证码";
      } else {
        if (
          this.newpassword === this.confirmpassword &&
          this.newpassword !== this.oldpassWord
        ) {
          const data = {
            username: this.username,
            oldpassWord: this.oldpassWord,
            newpassword: this.newpassword,
            confirmpassword: this.confirmpassword,
            captcha_code: this.verificationCode,
          };
          this.$emit("handleChangePassword", data);
          return;
        } else if (this.newpassword !== this.confirmpassword) {
          tips = "两次密码输入不一致";
          this.confirmpassword = "";
          this.newpassword = "";
        } else {
          tips = "旧密码与新密码不可一致";
          this.confirmpassword = "";
          this.newpassword = "";
        }
      }

      this.$toast.handleTipsText(tips);
    },
  },
  components: {
    VerificationCode,
  },
};
</script>
<style lang="less" scoped>
.forget-main {
  margin-top: 10px;
  input {
    width: 100%;
    padding: 15px;
    border: none;
    border-bottom: 2px solid #f6f6f6;
    background-color: #fff;
  }
  .edit {
    text-align: center;
    padding: 15px 0;
    border-radius: 5px;
    margin: 30px 10px 0 10px;
    background-color: #4cd964;
    color: #fff;
  }
}
</style>